/*
如果你的整个网站中有几处小小的样式类似，那么使用变量来统一处理这种情况是非常不错的选中，但是
当你的样式变得越来越复杂，你需要大段大段的重用样式的代码，独立的变量就没办法应付这种情况了
你可以通过sass的混合器实现大段样式的重用
混合器使用@mixin标识符定义。这个标识符给一大段样式赋予一个名字，这样你就可以轻易地通过引用这个名字重用这段样式，
下面这段sass代码，定义了一个非常简单的混合器，目的是添加跨浏览器的圆角边框
*/
@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius:5px;
  border-radius: 5px;
}
// 然后你就可以在你的样式表中通过@include来使用这个混合器，放在你希望的任何地方
.notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}
// 5-1 何时使用混合器
/*
利用混合器，可以很容易地在样式表的不同地方共享样式，如果你发现自己在不停地重复一段样式，那就应该把这段样式构造成优良的混合器，尤其是这段样式
本身就是一个逻辑单元，比如说是一组放在一起有意义的属性，
混合器在某些方面跟css类很像，都是让你给一大段样式命名，所以在选择使用哪个的时候可能会产生疑惑，最重要的区别就是，类名是在html文件中应用的，
而混合器是在样式表中应用的，这就意味着，类名具有语义化含义，而不仅仅是一种展示性的描述；用来描述html元素的含义，而不是html元素的外观。
另一方面，混合器是展示性的描述，用来描述一条css规则应用之后会产生怎样的效果。
*/

// 5-2 混合器中css规则
@mixin no-bullets { // 混合器中不仅可以包含属性，也可以包含css规则，包含选择器和选择器中的属性
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}
// 当一个包含css规则的混合器，通过@include包含在一个父规则中时，在混合器中的规则最终会生成父规则中的嵌套规则
ul.plain {
  color: #444;
  @include no-bullets;
}
// 上面的代码会被转换为
ul.plain {
  color: #444;
  list-style: none;
}
ul.plain li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}
// 5-3 给混合器传参

/*
*混合器并不一定总得生成相同的样式，可以通过在@include混合器时给混合器传参，来定制混合器生成的精确样式。
当@include混合器时。参数其实就是可以赋值给css属性的变量。如果你写过javascript， 这种方式跟javascript的function很像
*/
@mixin link-color($normal, $hover, $visited) {
  color: $normal;
  &:hover {
    color: $hover;
  }
  &:visited {
    color: $visited
  }
}
// 当混合器被@include时，你可以把它当做一个css函数来传参
a {
  @include link-color(blue,red ,green )
}
// sass最终生成的是
a {
  color: blue;
}
a:hover {
  color: red;
}
a:visited {
  color: green;
}
// 当你@include混合器时，有时候可能很难区分每个参数是什么意思，参数之间是一个什么样的顺序。
// 为了解决这个问题，sass允许通过语法$name: value的形式指定每个参数的值。这种形式的传参，参数顺序就不必再在乎了，只需要保证没有漏掉参数即可
a {
  @include link-color(
    $normal: blue,
    $visited: green,
    $hover: red )
}

// 5-4 默认参数值
//为了再@include混合器时不必传入所有的参数，我们可以给参数指定一个默认值。参数默认值使用$name: default-value的声明形式
// 默认值可以是任何有效的css属性值，甚至是其他参数的引用
@mixin link-colors(
  $normal,
  $hover: $normal,
  $visited: $normal
) {
  color: $normal;
  &:hover {
    color: $hover;
  }
  &:visited {
    color: $visited;
  }
}
// 混合器只是sass样式重用特性中的一个. 我们已经了解到混合器主要用于样式展示层的重用，如果你想重用语义化的类呢？
// 这就涉及到sass的另一个重要的特性，选择器继承